<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" href="../img/favicon.png" />
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/style.css">
		<link rel="stylesheet" href="../css/font-awesome.min.css" />
		<link rel="stylesheet" href="../css/responsive.css">
		<link rel="stylesheet" type="text/css" href="../css/shop.css" />
		<script src="../js/vue.js"></script>
		<script src ="../js/vue-resource.js"></script>
		<title>电商-首页</title>

	</head>

	<body><div id="app">
	<div>
		<!--页眉开始-->
		<header class="buddy-header">
			<div class="top-bar">
				<div class="container">
					<div class="row">
						<div class="col-md-6 col-sm-6 col-xs-12">
							<ul class="n-menu">
								<li>
									<a href="#"><i class="fa fa-usd"></i>货币</a>
								</li>
								<li>
									<a href="#" title=""><img src="../img/China-Flag.png" alt=""/>中文</a>
								</li>
							</ul>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12 text-center">
							<ul class="tp-right n-menu" v-show="!loginStatus">
								<li class="first">
									<a href="/login"><i class="fa fa-sign-in"></i>登录</a>
								</li>
								<li>|</li>
								<li>
									<a href="/register"><i class="fa fa-sign-in"></i>注册</a>
								</li>
							</ul>
							<ul class="tp-right n-menu" v-show="loginStatus">
								<li class="first">
									<a href="javascript:void(0)"><i class="fa fa-user"></i>{{userName}}</a>
								</li>
								<li>|</li>
								<li class="first" v-show="roleStatus">
									<a href="/userProject"><i class="fa fa-user"></i>我的项目</a>
								</li>
								<li class="first" v-show="!roleStatus">
									<a href="/myProject"><i class="fa fa-user"></i>我的项目</a>
								</li>
								<li v-show="roleStatus">|</li>
								<li class="first" v-show="roleStatus">
									<a href="/myTeam"><i class="fa fa-user"></i>我的团队</a>
								</li>
								<li>|</li>
								<li>
									<a href="/login"><i class="fa fa-sign-in"></i>注销</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="logo-menu-sec">
				<div class="container">
					<div class="row">
						<div class="logo-sec">
							<div class="col-md-3 col-lg-3 col-sm-4 col-xs-12">
								<div class="logo">
									<a href="index.html" title=""><img src="../img/logo.png" alt=""/></a>
								</div>
							</div>
							<div class="col-md-6 col-lg-5 col-sm-4 hidden-xs">
								<ul class="quick-prom">
									<li><i class="fa fa-phone"></i> <span>咨询方式 : 17826807543</span></li>
									<li class="hidden-sm"><i class="fa fa-envelope-o"></i><span><a
											href="#">mail@example.com</a></span></li>
								</ul>
							</div>
							<div class="col-md-3 col-lg-4 col-sm-4 col-xs-12">
								<div class="product-filter-form">
									<form>
										<input type="text" id="search" placeholder="人才搜索" v-model="search"/>
										<a type="button" :href="serachRes"><i class="fa fa-search"></i></a>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="main-menu-area">
				<div class="container">
					<div class="row">
						<div class="col-md-10 col-sm-9 col-xs-12">
							<nav class="main-menu">
								<ul>
									<li class="active">
										<a href="/"> <i class="fa fa-home"></i>主页</a>
									</li>
									<li>
										<a href="/serachRes/null">寻找人才</a>

									</li>
									<li>
										<a href="/projectList">根据类型找项目</a>
									</li>
									<li>
										<a href="javascript:;">关于我们</a>
									</li>
									<li>
										<a href="../shoplist.html">热门商店</a>
									</li>
									<li>
										<a href="/connect">联系我们</a>
									</li>
									<li>
										<a href="javascript:;">博客日志</a>
									</li>
									<li class="mega-parent">
										<a href="https://www.zbj.com/?pmcode=116578316&utm_source=bdpz&utm_medium=SEM">相关网站</a>

									</li>
								</ul>

							</nav>

							<div class="mobile-menu-area">
								<nav id="mobile-menu">
									<ul>
										<li>
											<a href="index.html">主页</a>
										</li>
										<li>
											<a href="../shoplist.html">热卖商品</a>
											<ul>
												<li>
													<a href="../shoplist.html">衬衫</a>
												</li>
												<li>
													<a href="../shoplist.html">裤</a>
												</li>
												<li>
													<a href="../shoplist.html">西装外套</a>
												</li>
												<li>
													<a href="../shoplist.html">鞋</a>
												</li>
											</ul>
										</li>
										<li>
											<a href="../shoplist.html">购物街</a>
											<ul>
												<li class="#">
													<a href="../shoplist.html">牛仔裤</a>
												</li>
												<li class="#">
													<a href="../shoplist.html">衬衣</a>
												</li>
												<li class="#">
													<a href="../shoplist.html">裤子</a>
												</li>
												<li class="#">
													<a href="../shoplist.html">配饰</a>
												</li>
											</ul>
										</li>
										<li>
											<a href="javascript:;">关于我们</a>
										</li>
										<li>
											<a href="../shoplist.html">热门商店</a>
										</li>
										<li>
											<a href="/connect">联系我们</a>
										</li>
										<li>
											<a href="../shoplist.html">产品详情</a>
										</li>
										<li>
											<a href="javascript:;">博客日志</a>
										</li>
										<li>
											<a href="https://www.zbj.com/?pmcode=116578316&utm_source=bdpz&utm_medium=SEM">相关网站</a>
											<ul>
												<li class="#">
													<a href="javascript:;">关于我们</a>
												</li>
											</ul>
										</li>
									</ul>
								</nav>
							</div>

						</div>

						<div class="col-md-2 col-sm-3 hidden-xs">
							<div class="cart-wishlist">
								<ul>
									<li>
										<a href="javascript:;">
											<div class="wishlist">
												<div class="wish-list-inner">
													<i class="fa fa-heart"></i>
												</div>
											</div>
										</a>
									</li>

								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!--页眉结束-->

		<!--页眉结束-->
		<section class="theme">

			<div class="breadcumb-area">
				<div class="bread_main">
					<div class="bread_hading text-center">
						<h1>项目分类</h1>
					</div>
					<ol class="breadcrumb">
						<li class="home">
							<a href="index.html" title="go to home">home</a>
						</li>
						<li class="shop">
							<a href="javascript:;">shop</a>
						</li>
					</ol>
				</div>
			</div>
		</section>
		<section class="shop-sidebar">
			<div class="container">
				<div class="row">
					<div class="col-md-3 col-sm-4 col-xs-12">
						<div class="total_widget ">
							<aside class="aside_widget widget-categories">
								<h3 class="sidebar_title">分类</h3>
								<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
							</aside>
							<aside class="aside_widget shop-filter">
								<h3 class="sidebar_title">价格筛选</h3>
								<div class="info_widget">
									<div class="price_filter">
										<div class="slider-range">
											<div id="range" class="ui-slider-range ui-widget-header ui-corner-all"></div>
											<span id="handle_right" class="ui-slider-handle ui-state-default ui-corner-all"></span>
											<span id="handle_left" class="ui-slider-handle ui-state-default ui-corner-all"></span>
										</div>
										<div class="price_slider_amount">
											<span class="btn">过滤</span>
											<input id="p_text" type="text" placeholder="add your price" />
										</div>
									</div>
								</div>
							</aside>
								<h3 class="sidebar_title">热门标签</h3>
								<ul class="clearfix">
									<li><a href="#" class="btn">软件开发</a></li>
									<li><a href="#" class="btn">微信开发</a></li>
									<li><a href="#" class="btn">A</a></li>

								</ul>
							</aside>
						</div>
					</div>
					<div class="col-md-9 col-sm-8 col-xs-12 content">
						<div class="shop-list-grid-area">
							<div class="product-filter">
								<div class="row">
									<div class="col-md-7 col-sm-7 col-xs-12">
										<div class="sort">
											<label class="hidden-xs">排序方式：</label>
											<select id="input-sort">
												<option value="">默认</option>
												<option value="">价格(低>高)</option>
												<option value="">价格(高>低)</option>
												
											</select>
										</div>
										<div class="compare-total hidden-md hidden-sm hidden-xs">
											<a href="#" class="btn">
												产品比较
											</a>
										</div>
									</div>
									<div class="col-md-5 col-sm-5 col-xs-12">
										<div class="show-mode-right">
											<div class="show_mode">
												<ul class="tab_button">
													<li class="active">
														<a data-toggle="tab" title="格" href="#grid" aria-expanded="true"><i class="fa fa-th"></i></a>
													</li>
													<li>
														<a data-toggle="tab" title="名单" href="#list" aria-expanded="false"><i class="fa fa-th-list"></i></a>
													</li>
												</ul>
											</div>

											<div class="limit  hidden-sm ">
												<label class=" hidden-xs">显示：</label>
												<select id="input-limit">
													<option value="">9</option>
													<option value="">12</option>
													<option value="">25</option>
													
												</select>
											</div>
										</div>
									</div>
								</div>

							</div>

						</div>

						<div class="shop-product-area">
							<div class="tab-content">
								<el-table
										:data="tableData"
										style="width: 100%">
									<el-table-column
											type="index"
											width="50">
									</el-table-column>
									<el-table-column
											prop="name"
											label="项目名"
											width="180">
									</el-table-column>
									<el-table-column
											prop="startTime"
											label="开始时间"
											width="180">
									</el-table-column>
									<el-table-column
											prop="endTime"
											label="结束时间">
									</el-table-column>
									<el-table-column
											fixed="right"
											label="操作"
											width="100">
										<template slot-scope="scope">
											<el-button type="text" size="small">查看详情</el-button>
											<el-button type="text" size="small" @click="tender(scope.row)">投标</el-button>
										</template>
									</el-table-column>
								</el-table>
								<div class="block" style="float: right">
									<el-pagination
											@size-change="handleSizeChange"
											@current-change="handleCurrentChange"
											:current-page="currentPage4"
											:page-sizes="[10,15,20]"
											:page-size="10"
											layout="total, sizes, prev, pager, next, jumper"
											:total="pager.total">
									</el-pagination>
								</div>
								<el-dialog title="请选择一个团队" :visible.sync="dialogFormVisible" @close="dialogClose">
									<el-select v-model="value6" placeholder="请选择" @change="itemChange">
										<el-option
												v-for="item in teamList"
												:key="item.id"
												:label="item.name"
												:value="item.id"
										>
											<span style="float: left">{{ item.name }}</span>
										</el-option>
									</el-select>
									<div class="demo-input-suffix">
										状态：
										<el-input
												placeholder="请输入内容"
												v-model="userTeamStatus"
												:disabled="true"
										>
										</el-input>
									</div>

									<div slot="footer" class="dialog-footer">
										<el-button @click="dialogFormVisible = false">取 消</el-button>
										<el-button type="primary" @click="tenderProject">确 定</el-button>
									</div>
								</el-dialog>
							</div>
						</div>

					</div>
				</div>
			</div>
		</section>

		<!--页脚开始-->
		<div class="section-info pt55 pb55">
			<div class="parallax-bg">

				<div class="section-content">
					<div class="container">
						<div class="row">

							<div class="col-md-4 col-sm-6 col-xs-12">
								<a class="info-block" href="#"><i class="fa fa-truck"></i>
									<h3>免费送货</h3>
									<p>免运费全国各地</p>
								</a>
							</div>
							<div class="col-md-4 col-sm-6 col-xs-12">
								<a class="info-block" href="#"><i class="fa fa-headphones"></i>
									<h3>支持定制</h3>
									<p>全天候24小时支持</p>
								</a>
							</div>
							<div class="col-md-4 col-sm-6 col-xs-12">
								<a class="info-block" href="#"><i class="fa fa-diamond"></i>
									<h3>高品质</h3>
									<p>拥有最好的品质和品牌</p>
								</a>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="our_clients_area pt55 pb55">
			<div class="container">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="section-title text-center pb30">
							<h1>品牌与客户</h1>
							<span></span>
						</div>
						<div class="client-active">
							<div class="client-name">
								<img src="../img/client/01.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/02.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/03.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/04.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/05.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/06.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/04.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/03.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/02.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/01.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/05.png" alt="">
							</div>
							<div class="client-name">
								<img src="../img/client/06.png" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<footer>
			<div class="footer-widgets-area pt55">
				<section class="block">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<div class="content-box no-margin go-simple">
									<div class="row">
										<div class="col-md-3 col-sm-4 col-xs-12">
											<div class="widget about-widget">
												<div class="logo">
													<a href="index.html"><img alt="" src="../img/logo2.png"></a>
												</div>
												<p>威客校园是一个为了让学生之间建立交往、互利互助的威客平台，以个人自身智慧、知识、能力、经验来实现个人价值； </p>
												<ul>
													<li>
														<i class="fa fa-map-marker"></i> Zhejiang University of Science and
														Technology
													</li>
													<li>
														<i class="fa fa-phone"></i> 17826807543
													</li>
												</ul>
											</div>
										</div>
										<div class="col-md-3 col-sm-4 col-xs-12">
											<div class="widget how-to-buy">
												<h3 class="heading2">客户服务</h3>
												<ul>
													<li>
														<a href="#" title="">联系我们</a>
													</li>
													<li>
														<a href="#" title="">网站地图</a>
													</li>
													<li>
														<a href="#" title="">条款与条件</a>
													</li>
													<li>
														<a href="#" title="">礼品</a>
													</li>
												</ul>
											</div>

										</div>
										<div class="col-md-3 hidden-sm col-xs-12">
											<div class="widget customer-services">
												<h3 class="heading2">信息</h3>
												<ul>
													<li>
														<a href="#" title="">我们的博客</a>
													</li>
													<li>
														<a href="#" title="">关于我们</a>
													</li>
													<li>
														<a href="#" title="">安全交易</a>
													</li>
													<li>
														<a href="#" title="">隐私政策</a>
													</li>
												</ul>
											</div>

										</div>
										<div class="col-md-3 col-sm-4 col-xs-12">
											<div class="widget news-letter">
												<h3 class="heading2">最新消息推送</h3>
												<p>平台最新优惠信息推送</p>
												<form>
													<input type="text" placeholder="请输入你的邮箱"/>
													<button type="submit"><i class="fa fa-search"></i></button>
												</form>
												<ul class="social-buttons">
													<li>
														<a class="fbook" href="#" title=""><i
																class="fa fa-facebook"></i></a>
													</li>
													<li>
														<a class="frss" href="#" title=""><i class="fa fa-rss"></i></a>
													</li>
													<li>
														<a class="tublr" href="#" title=""><i
																class="fa fa-linkedin"></i></a>
													</li>
													<li>
														<a class="gplus" href="#" title=""><i class="fa fa-google-plus"></i></a>
													</li>
													<li>
														<a class="twitt" href="#" title=""><i class="fa fa-twitter"></i></a>
													</li>
												</ul>
											</div>

										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>

			<div class="bottom-line">
				<div class="container">
					<div class="row">
						<div class="col-md-6 col-sm-6 col-xs-12">
							<ul class="payment-support">
								<li><img src="../img/icon/pay1.png" alt=""/></li>
								<li><img src="../img/icon/pay2.png" alt=""/></li>
								<li><img src="../img/icon/pay3.png" alt=""/></li>
								<li><img src="../img/icon/pay4.png" alt=""/></li>
								<li><img src="../img/icon/pay5.png" alt=""/></li>
								<li><img src="../img/icon/pay6.png" alt=""/></li>
							</ul>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12">
							<span>本网站所有解释权 © 2016 -<a href="#">PromotShop.</a> 版权所有 </span>
						</div>
					</div>
				</div>
			</div>
		</footer>

	</div>
	</div></body>
	<script src="../js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>

	<script src="../js/jquery-3.1.1.min.js"></script>
	<script src="../js/fly.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/owl.carousel.min.js"></script>
	<script src="../js/jquery.meanmenu.js"></script>
	<script src="../js/jquery-ui.min.js"></script>
	<script src="../js/wow.min.js"></script>
	<script src="../js/jquery.nivo.slider.pack.js"></script>
	<script src="../js/plugins.js"></script>
	<script src="../js/main.js"></script>
	<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.fly.min.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="../js/shoplist.js" type="text/javascript" charset="utf-8"></script>-->
	<script src="../js/sousuo.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/addcart.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../css/element.css">
	<script src="../js/element.js"></script>
	<script>
        new Vue({
            el: '#app',
            created(){
                this.initTree();
                this.handleNodeClick(this.initDataList);
                this.initUserLeaderTeam();
                this.userInit();
                },
            data() {
                return {
                    data: [],
                    dialogFormVisible:false,
					value6:'',
					serachRes:'',
                    teamList: [],
                    userTeamStatus:'',
                    defaultProps: {
                        children: 'typeTrees',
                        label: 'name'
                    },
                    tableData: [],
					projectId:'',
                    roleStatus: true,
                    search:'',
					initDataList:{
                      id:5,
					},
                    currentPage4: 1,
                    pager:{
                        pageNo:1,
                        pageSize:10,
                    },
					userName:'',
                };

            },
            methods: {
                userInit() {
                    let userName = sessionStorage.getItem("userName");
                    let role = sessionStorage.getItem("role");
                    console.log("==="+role+userName);
                    this.userName = userName;
                    if (role==="2"){
                        this.roleStatus=false;
                    }
                    this.loginStatus = true;
                },
                itemChange(id){
                    this.teamId = id;
                    this.$http.post('/projectCompete/validation', {}, {
                        params: {
                            projectId: this.projectId,
                            teamId: this.teamId
                        }
                    }).then(function (res) {
                        console.log("===" + res.body);
                        if (res.body.body === "true") {
                            this.userTeamStatus = "已投标";
                        } else {
                            this.userTeamStatus = "未投标";
                        }
                    });
				},
                dialogClose(){
                    this.value6 = "";
                    this.dialogFormVisible=false;
                    this.userTeamStatus="";
				},
                tenderProject(){
                    if(this.userTeamStatus==="未投标"){
                        this.$http.post('/projectCompete',{},{params:{teamId:this.value6,projectId:this.projectId}}).then(function (res) {
                            this.$message({
                                message: res.body.body,
                                type: 'success'
                            });
                            this.value6 = "";
                            this.dialogFormVisible=false;
                            this.userTeamStatus="";
                        });
					}else {
                        this.$message({
                            message: "该项目已投标",
                            type: 'warning'
                        });
					}
				},
                initUserLeaderTeam(){
                    this.$http.get('/team/leader', {}).then(function (res) {
                        this.teamList = res.body.body;
                    });
				},
                tender(row){
					this.projectId=row.id;
					this.dialogFormVisible=true;
				},
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pager.pageSize=val;
                    this.$http.post('/project/search',{},{params:this.pager}).then(function (res) {
                        this.tableData=res.body.list;
                        this.pager.total=parseInt(res.body.total);
                    });
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.pager.pageNo=val;
                    this.$http.post('/project/search',{},{params:this.pager}).then(function (res) {
                        this.tableData=res.body.list;
                        this.pager.total=parseInt(res.body.total);
                    });
                },
                initTree(){
                    this.$http.get('/project/tree',{}).then(function (res) {
                        this.data=res.body.body;
                    });
				},
                handleNodeClick(data) {
                    console.log(data.id);
                    this.pager.typeId=data.id;
                    this.$http.post('/project/search',{},{params:this.pager}).then(function (res) {
                        this.tableData=res.body.list;
                        this.pager.total=parseInt(res.body.total);
                    });
                },
            },

        })
	</script>
</html>